<template>
  <div class="main home_main">
    <div class="home-top" :class="{'ispc':mobile==2}">
      <img src="../assets/images/blcimg/homelogo.png" alt="" class="home-icon" />
<!--      <img src="../assets/images/blcimg/message.png" alt="" class="home-message" @click="$router.push('/message')" />-->
    </div>
    <div class="home-content">
      <div class="home-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl" alt="" class="banner-img" />
          </van-swipe-item>
        </van-swipe>
      </div>
<!--      <ul class="wallet-info">-->
<!--        <li>-->
<!--          <div class="s">{{ info2.totalUSDTAmount }}</div>-->
<!--          <div class="n">{{ $t('new.doc13') }}</div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="s">{{ info.credits }}</div>-->
<!--          <div class="n">{{ $t('new.doc14') }}</div>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class="home-notice" @click="$router.push('/messagelist?type=SYSTEM&name=系统消息')">-->
<!--        <div class="notice-icon"></div>-->
<!--        <div class="notice-info">-->
<!--          <van-swipe style="height: .31rem;" vertical :show-indicators="false">-->
<!--            <van-swipe-item v-for="item in noticeList" :key="item.id">-->
<!--              <div class="notice-name">{{  item.title  }}</div>-->
<!--            </van-swipe-item>-->
<!--          </van-swipe>-->
<!--        </div>-->
<!--      </div>-->
      <div class="home-currency" >
        <div class="currency-info" v-for="item in iconList" :key="item.id" @click="handlerInfo(item)"
          v-if="item.changeRate != 0"
        >
          <div class="info-name">
            <div>{{ item.name }}</div>
            <p :style="{ color: item.changeRate > 0 ? '#00BA7E' : '#F5435A' }"><span
                v-if="item.changeRate > 0">+</span>{{ item.changeRate }}%</p>
          </div>
          <div class="info-num" :class="{ color1: item.color == 1, color2: item.color == 2 }">{{ item.closingprice }}</div>
        </div>
      </div>
      <div class="sub-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in subbannerList" :key="item.id">
            <img :src="item.imgUrl" alt="" class="banner-img" @click="handlerBanner(item)" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="icon-list">
        <div class="icon-top">
          <div>{{ $t('new.desc47') }}</div>
          <div>{{ $t('new.desc48') }}</div>
          <div>{{ $t('new.desc49') }}</div>
        </div>
        <div class="inco-info">
          <div class="info-item" v-for="item in iconList" :key="item.id" @click="handlerInfo(item)"
               v-if="item.changeRate != 0">
            <div><img :src="item.icon" alt="" />{{ item.name }}</div>
            <div :class="{ color1: item.color == 1, color2: item.color == 2 }">${{ item.closingprice }}</div>
            <div :class="item.changeRate > 0 ? 'iconbg' : ''"><span v-if="item.changeRate > 0">+</span>{{ item.changeRate }}%
            </div>
          </div>
        </div>
      </div>
    </div>

    <bottom_nav :activeTitle="activeTitle"></bottom_nav>

  </div>
</template>
<script>
export default {
  data() {
    return {
      mobile:localStorage.getItem('ismobile'),
      is_line: false,
      banneract: 0,
      activeTitle: this.$t('title.home'),
      bannerList: [],
      noticeList: {},
      subbannerList: [],
      info:[],
      info2:[],
      iconList: [
        // {
        //   code: 'ethusdt',
        //   name: 'ETH',
        //   changeRate: 0,
        //   closingprice: 0,
        //   icon: '',
        //   color: 0,
        //   buyCoinId: 0
        // },
        // {
        //   code: 'btcusdt',
        //   name: 'BTC',
        //   changeRate: 0,
        //   closingprice: 0,
        //   icon: '',
        //   color: 0,
        //   buyCoinId: 0
        // },
        // {
        //   code: 'ltcusdt',
        //   name: 'LTC',
        //   changeRate: 0,
        //   closingprice: 0,
        //   icon: '',
        //   color: 0,
        //   buyCoinId: 0
        // }
      ],
      socket: null
    }
  },
  mounted() {
    this.$post(this.URL.common.banner, {
      positionKey: 'INDEX_BANNER'
    }).then(res => {
      if (res.code == 0) {
        this.bannerList = res.data
      }
    })
    this.$post(this.URL.common.banner, {
      positionKey: 'INDEX_CENTRAL_BANNER'
    }).then(res => {
      if (res.code == 0) {
        this.subbannerList = res.data
      }
    })
    this.$post(this.URL.common.notice, {}).then(res => {
      if (res.code == 0) {
        this.noticeList = res.data;
      }
    })
    this.$post(this.URL.member.iconListConfig, {}).then(res => {
      if (res.code == 0) {
        res.data.forEach(e => {
          // let info = res.data.find(item => item.buyCoinName == e.name);
          e.code = e.buyCoinName.toLowerCase() + e.sellCoinName.toLowerCase();
          e.sellCoinId = e.sellCoinId;
          e.buyCoinId = e.buyCoinId;
          e.name = e.buyCoinName;
          e.changeRate = 0;
          e.closingPriceCny = 0;
          e.color = 0;
          e.icon = e.icon
        })
        this.iconList = res.data;
        console.log(this.iconList)
      }
    })
    this.$post(this.URL.member.personal, {}).then(res => {
      if (res.code == 0) {
        this.info = res.data
      } else {
        this.$toast(res.message)
      }
    })
    this.$post(this.URL.withdrawal.wallet, {}).then(res => {
      if (res.code == 0) {
        this.info2 = res.data
      } else {
        this.$toast(res.message);
      }
    })
    this.getData();
  },
  methods: {
    handlerInfo(item) {
      this.$router.push(`/business/info?id=${item.name}&code=${item.code}&coinid=${item.buyCoinId}&sellCoinId=${item.sellCoinId}`)
    },
    //banner
    handlerBanner(item) {
      if (item.forwardHasLogin && localStorage.getItem('token') == null) {
        this.$route.push('/login');
        return;
      }
      //REWARD_RANKING佣金榜单
      console.log(item.forwardPath)
      if (item.forwardPath == 'REWARD_RANKING') {

        this.$router.push('/rewardpark');
        return;
      }
    },
    getData() {
      let _this = this;
      if (typeof WebSocket == "undefined") {
      } else {
        _this.socket = new WebSocket(process.env.WSS_URL_API)
        _this.socket.onopen = function () {
          _this.socket.send('start:topic=market_list')
        };
        //获得消息事件
        _this.socket.onmessage = function (msg) {
          let data = JSON.parse(msg.data);
          if (data.data != undefined) {
            _this.iconList.forEach(e => {
              let info = data.data.find(item => item.code == e.code);
              if (info != undefined) {
                e.changeRate = info.changeRate;
                if (parseFloat(e.closingprice) > parseFloat(info.closingPrice)) {
                  e.color = 2
                } else if (parseFloat(e.closingprice) < parseFloat(info.closingPrice)) {
                  e.color = 1
                } else {
                  e.color = 0
                }
                e.closingprice = info.closingPrice;

                if (e.icon == '') {
                  e.icon = info.icon
                }

              }
            })
          }
        };
        //关闭事件
        _this.socket.onclose = function () {
          console.log('关闭')
          // _this.getData();
        };
        //发生了错误事件
        _this.socket.onerror = function () {
          //_this.getData();
          console.log('错误')
          //此时可以尝试刷新页面
        };
      }
    }
  },
  destroyed() {
    this.socket.close()
  }

}

</script>


<style lang="less" scoped>
.main {
  min-height: 100vh;

  .home-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .88rem;
    z-index: 8;background: #131e30;
    display: flex;
    justify-content: space-between;

    .home-icon {
      height: 0.46rem;
      margin: .21rem 0 0 .27rem;
    }

    .home-message {
      width: 0.5rem;
      height: 0.5rem;
      margin: .19rem 0.27rem 0 0;
    }
  }

  .home-content {
    padding: 1.08rem .2rem 1.2rem;

    .home-banner {
      width: 100%;
      height: 2.78rem;
      border-radius: .2rem;
      overflow: hidden;

      .banner-img {
        width: 100%;
        height: 2.78rem;
        object-fit: cover;
      }
    }

    .home-notice {
      padding: .21rem 0 .29rem;
      display: flex;

      .notice-icon {
        flex: 0 0 .36rem;
        height: .31rem;
        margin-right: .1rem;
        background: url('../assets/images/blcimg/notice.png') center no-repeat;
        background-size: 100% 100%;
      }

      .notice-info {
        flex: 0 0 6.2rem;
        height: .31rem;

        .notice-name {
          font-size: .24rem;
          color: #222222;
          height: .31rem;
          line-height: .31rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
      }
    }

    .home-currency {
      padding: .32rem 0.3rem;
      margin-top: .2rem;
      background: #172941;
      border-radius: 0.16rem;
      display: flex;
      overflow: auto;


      .currency-info {
        flex: 0 0 33%;

        .info-name {
          display: flex;
          font-size: .2rem;

          p {
            margin-left: 0.07rem;
            color: #E35461;
          }
        }

        .info-num {
          margin-top: .16rem;
          font-size: .36rem;
          font-weight: 700;
        }

        .color1 {
          color: #F5435A;
        }

        .color2 {
          color: #00BA7E;
        }
      }
    }

    .sub-banner {
      overflow: hidden;

      .banner-img {
        width: 100%;
        height: 1.8rem;
        object-fit: cover;
      }
    }

    .icon-list {
      margin-top: .2rem;
      padding: 0 0.32rem;
      background: #172941;
      border-radius: .16rem;

      .icon-top {
        display: flex;

        div {
          padding: .4rem 0 .16rem;
          font-size: .22rem;
          flex: 0 0 2.5rem;

          &:first-child {
            flex: 0 0 2.2rem;

          }

          &:nth-child(2) {
            flex: 1;
          }

          &:last-child {
            text-align: right;
          }
        }
      }

      .info-item {
        padding: 0.2rem 0;
        border-bottom: .02rem solid #2b3445;
        display: flex;

        div {
          flex: 0 0 1.6rem;
          line-height: .6rem;
          font-size: .28rem;

          &:first-child {
            flex: 0 0 2.2rem;
            display: flex;

            img {
              width: .54rem;
              height: .54rem;
              margin: .03rem .2rem 0 0;
              font-size: .28rem;
            }
          }

          &:nth-child(2) {
            flex: 1;
          }

          &:last-child {
            height: .6rem;
            background: linear-gradient(-90deg, #f53839 0%, #f95657 100%);
            border-radius: 0.12rem 0.12rem 0.12rem 0.12rem;
            font-size: .26rem;
            color: #FFFFFF;
            text-align: center;
            line-height: .6rem;
          }
        }

        .iconbg {
          background: linear-gradient(-90deg, #00b77d 0%, #00d591 100%) !important;
        }

        .color1 {
          color: #F5435A;
        }

        .color2 {
          color: #00BA7E;
        }
      }
    }
  }
}
.wallet-info {
  padding: 0.32rem 0.3rem;
  background: #172941;
  border-radius: 0.16rem;
  display: flex;
  margin: .2rem 0;
  li {
    flex:1;
    text-align: center;position: relative;
    .s {
      font-weight: bold;
      color: #caa03a;
      font-size: .36rem;
    }
    &:last-child:after {
      height: .6rem;
      width: .02rem;
      background: #caa03a;
      display: block;
      content:'';
      position: absolute;left:0;top:50%;
      margin-top: -.3rem;
    }
  }
}
</style>
